<template>
    <div class="table-all">
        <div class="search_box">
            <el-date-picker
                @change="getData"
                v-model="year"
                type="year"
                format="yyyy"
                value-format="yyyy"
                placeholder="选择年">
            </el-date-picker>
            <el-select v-model="value" placeholder="请选择" style="margin-left:20px;" @change="getData">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
        </el-select>
        </div>
        <div class="contents">
            <div class="contents_left">
                <OpenlayersMap  />
                <LegendMap :title="title" :list="legendList" />
            </div>
            <div class="contents_right">
                <v-table
                :table-columns="tableColumns"
                :table-data="tableData"
                :is-index="false"
                :isDynamicCol="false"
                :isSelection="false"
                height="70vh"
                ref="table">
                </v-table>
            </div>
        </div>
    </div>
</template>

<script>
import VTable from '@/components/VTable/index'
import OpenlayersMap from '@/components/openlayersMap/openlayersMap.vue';
import { spaceAnalysisNew } from '@/api/risk/cityWaringResult'
import iconRed from "@/assets/map/column-red.png";
import iconYellow from "@/assets/map/column-yellow.png";
import iconGreen from "@/assets/map/column-green.png";
import iconGray from "@/assets/map/column-grey.png";
import LegendMap from '@/components/openlayersMap/legendMap.vue';
export default {
    components:{
        VTable,OpenlayersMap,LegendMap
    },
    data(){
        return{
            year:'',
            value:'',
            options:[
                {label:'全部',value:''},
                {label:'住房',value:'住房'},
                {label:'小区',value:'小区'},
                {label:'街区',value:'街区'},
                {label:'城区',value:'城区'},
                {label:'城中村',value:'城中村'},
            ],
            tableColumns:[
                {
                    prop: 'cityName',
                    label: '城市名称',
                    // minWidth: '100',
                    slotname: 'cityName',
                    options: {}
                },
                {
                    prop: 'rank',
                    label: '排名',
                    // minWidth: '100',
                    slotname: 'rank',
                    options: {}
                },
                {
                    prop: 'youXiuLiangHaoRate',
                    label: '优秀/良好占比',
                    minWidth: '120',
                    slotname: 'youXiuLiangHaoRate',
                    options: {}
                },
            ],
            tableData:[],
            title:'优秀/良好占比',
            legendList:[
                {color:'#0ccdcd',name:'85%及以上'},
                {color:'#c7a000',name:'75%-85%'},
                {color:'gray',name:'60%-75%'},
                {color:'#b23700',name:'60%以下'},
            ]
        }
    },
    methods:{
        getData(){
            let paramas = {
                year: this.year,
                oneTargetName: this.value
            }
            spaceAnalysisNew(paramas).then(res => {
                if(res.code == 200){
                    let data = res.data
                    this.tableData = data
                    data = data.map((item, index) => {
                            return {
                                ...item,
                                id: index + 1,
                                icon:
                                    item.youXiuLiangHaoRateD < 60
                                        ? iconRed
                                        : item.youXiuLiangHaoRateD > 60 && item.youXiuLiangHaoRateD < 75
                                            ? iconGray
                                            : item.youXiuLiangHaoRateD > 75 && item.youXiuLiangHaoRateD < 85 ?iconYellow : iconGreen,
                                posX: item.lon,
                                posY: item.lat,
                                text: item.youXiuLiangHaoRate,
                                scales: 1,
                                year: this.year,
                                iconType: 'spaceAnalysis',//必填，用于筛选类型
                                iconTypeName: 'bar'//必填，用于判断点击的是柱子还是撒点
                            }
                        });
                    this.eventBus.$emit("setMarkersMaps",data)
                }
            })
        }
    },
    activated(){
      console.log('router',this.$route.query)
      let query = this.$route.query
      if(query.year){
        this.year = query.year
      }else{
        this.year = this.$dayjs().format('YYYY')
      }
      this.getData()
    },
    mounted(){
        // console.log('router',this.$route.query)
        // let query = this.$route.query
        // if(query){
        //     this.year = query.year
        // }else{
        //     this.year = this.$dayjs().format('YYYY')
        // }
        // this.getData()
    },

}
</script>

<style lang="scss" scoped>
.table-all{
    .search_box{
        background: #fff;
        margin: 10px;
        padding: 20px;
    }
    .contents{
        background: #fff;
         margin: 10px;
        padding: 20px;
        display: flex;
        justify-content: space-between;

        .contents_left{
            width: 80%;
            height: 70vh;
            position: relative;
        }

        .contents_right{
            width: 19%;
        }
    }
}
</style>
